<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <div class="admin-resources-photo">
    <!--选择的图片-->
    <el-card
      class="box-card"
      v-if="selImageArr.length">
      <div
        slot="header"
        class="clearfix">
        <span>要上传的图片</span>
        <el-button
          style="float: right; padding: 3px 0"
          @click="upImage"
          type="text"
          :loading="upLoading"
          :disabled="upLoading">确定上传</el-button>
      </div>
      <ul
        class="images clearfix">
        <li
          v-for="(v, k) in selImageArr"
          :key="k"
          class="img w-image-fit w-pointer"
          @click="imageClick(v)"
          :style="bgImage(v)">
          <i
            @click.stop="removeBtnClick(k)"
            class="el-icon-error clear"/>
        </li>
      </ul>
    </el-card>
    <w-images
      ref="IMAGES"
      prefix="OSS_image_"
      url-p="pcPhotoListUrl"
      :bucket="photoBocket">
      <el-button
        size="mini"
        type="primary"
        @click="addBtnClick">
        <i class="el-icon-plus"/>
      </el-button>
      <input
        class="w-input-hid"
        type="file"
        multiple
        @change="fileChange"
        accept="image/*"
        ref="FILE_INPUT">
    </w-images>
    <w-viewer ref="WViewer"/>
  </div>
</template>

<script>
  import { LocalImage } from 'yb-tool'
  import OSS from '@/api/OSS'
  import Config from '@/config/index'
  import WImages from '../../com/images/index'
  import WViewer from '@/components/global/viewer/index'
  export default {
    name: 'AdminResourcesPhoto',
    inject: ['bgImage'],
    components: {
      WImages,
      WViewer
    },
    data() {
      return {
        // 文件数组
        fileArr: [],
        // 选中的图片数组(要显示的数据)
        selImageArr: [],
        // 是否上传中
        upLoading: false,
        // photoBocket
        photoBocket: Config.photoBocket
      }
    },
    methods: {
      // 添加按钮点击
      addBtnClick() {
        this.$refs['FILE_INPUT'].click()
      },
      // 文件改变的时候
      fileChange(e) {
        const [...files] = e.target.files
        this.fileArr = files
        const loadFileArr = files.map((file) => {
          return LocalImage(file)
        })
        Promise.all(loadFileArr).then((dataArr) => {
          this.selImageArr = dataArr
        }).catch(() => {
          this.$w_popview.msgError('加载本地图片出错')
        })
      },
      // 上传数据
      upImage() {
        this.upLoading = true
        const ups = this.fileArr.map((file) => {
          return OSS.aLiFileUp(file, Config.photoCDNPerfix, '', 'image')
        })
        Promise.all(ups).then(() => {
          this.$w_popview.msgSuccess('上传完成')
          // 文件数组
          this.fileArr = []
          this.selImageArr = []
        }).catch(() => {
          this.$w_popview.msgError('上传失败')
        }).finally(() => {
          this.upLoading = false
          this.$refs['IMAGES'].reloadData()
        })
      },
      // 删除按钮点击
      removeBtnClick(k) {
        this.fileArr.splice(k, 1)
        this.selImageArr.splice(k, 1)
      },
      // 图片点击
      imageClick(url) {
        this.$refs['WViewer'].show([url])
      }
    }
  }
</script>

<style lang="scss" scoped>
  .admin-resources-photo {
    >.box-card {
      margin: 20px 0;
      .images {
        margin: 0;
        list-style: none;
        padding: 0;
        >.img {
          width: 200px;
          height: 200px;
          float: left;
          border: 1px dashed #ccc;
          margin: 10px;
          position: relative;
          >.clear {
            position: absolute;
            right: 5px;
            top: 5px;
            color: #eee;
          }
          >.clear:hover {
            color: #999;
          }
        }
      }
    }
  }
</style>

<style lang="scss">
  .admin-resources-photo {
    .el-card__body {
      padding: 0;
    }
  }
</style>
